<template>
  <div>
    <PTable
      tableSize="default"
      :dataColumns="fields"
      :table="table"
    />
  </div>
</template>
<script lang="ts" setup>
import PTable from '@/components/PTable.vue'
import type { CommonField } from '@/common/type/field'
import { ref } from 'vue'
import { DefaultPureTable, type PureTable } from '@/common/type/table'
import { getApisInfo } from '@/api/sys'
import { isResultSuccess } from '@/util/http'
import Logger from '@/util/log'
import type { ApisData } from '@/common/type/data'

const fields: CommonField[] = [
  {
    prop: 'idx',
    label: '序号',
    tableMeta: {
      width: '66',
      type: 'index'
    },
  },
  {
    label: 'url',
    prop: 'path',
    tableMeta: {
      width: '420',
    }
  },
  {
    label: '方法名称',
    prop: 'method',
    tableMeta: {
      width: '120',
      contentType: 'tag',
      tagMapper: {
        'GET': { text: 'GET', type: 'success' },
        'POST': { text: 'POST', type: 'danger' }
      },
    }
  },
  {
    label: '句柄名称',
    prop: 'handler',
  }
]

const table: PureTable<ApisData> = new DefaultPureTable({
  refreshTableData: async () => {
    try {
      const res = await getApisInfo() // todo 先不用查询条件，后面再优化
      if (res && isResultSuccess(res)) {
        Logger.prettyInfo('getApisInfo', res.data)
        table.data.splice(0, table.data.length, ...res.data.list)
      }
    } catch (error) {
      Logger.prettyError('getApisInfo catch error', error)
    }
  },
})

</script>
<style scoped></style>